<template>
  <div class="form-container">
    <el-row :gutter="20">
      <el-col
        :lg="{ span: 10, offset: 7 }"
        :md="{ span: 20, offset: 2 }"
        :sm="{ span: 20, offset: 2 }"
        :xl="{ span: 10, offset: 7 }"
        :xs="24"
      >
        <el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
          <el-form-item label="户名" prop="account_name">
            <el-input v-model="form.account_name" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="账号" prop="bank_no">
            <el-input v-model="form.bank_no" />
          </el-form-item>
          <el-form-item label="汇款附言" prop="account_note">
            <el-input v-model="form.account_note" type="textarea" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div class="pay-button-group">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import { doEdit, getList } from '@/api/metting'
  import { baseURL, HOST } from '@/config'

  export default defineComponent({
    props: {
      mettingId: {
        type: Number,
        required: true,
      },
    },
    emits: ['change-step'],
    setup(props) {
      const { proxy } = getCurrentInstance()

      const state = reactive({
        imgpath: '',
        uploadActionUrl: baseURL + 'upload/ajaxUploads',
        formRef: null,
        detail: {},
        form: {
          account_name: '',
          bank_name: '',
          bank_no: '',
          account_note: '',
          id: props.mettingId,
        },
        rules: {
          account_name: [
            { required: true, message: '请输入户名', trigger: 'blur' },
          ],
          bank_name: [
            { required: true, message: '请输入开户行', trigger: 'blur' },
          ],
          bank_no: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          account_note: [
            { required: true, message: '请输入汇款附言', trigger: 'blur' },
          ],
        },
      })
      const fetchData = async () => {
        const {
          data: { list },
        } = await getList({ id: state.form.id })
        state.detail = list[0]
        state.form.account_name = list[0].account_name
        state.form.bank_name = list[0].bank_name
        state.form.bank_no = list[0].bank_no
        state.form.account_note = list[0].account_note
      }

      const handleSubmit = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            close()
          }
        })
      }
      const handleSuccess = (response) => {
        if (response.code == 0) {
          state.form.qrcode = response.data[0].path
          state.imgpath = HOST + response.data[0].path
        }
      }
      fetchData()
      return {
        ...toRefs(state),
        handleSubmit,
        handleSuccess,
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
  :deep() {
    .el-upload-list {
      display: none;
    }
  }
</style>
